<!--
 * @Author: your name
 * @Date: 2020-05-13 17:23:11
 * @LastEditTime: 2020-06-15 16:43:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \v1.0.0\components\kmlc-com\kmlc-form-upload-file\kmlc-form-upload-file.vue
 -->
<template>
  <view>
    <tui-list-cell :hover="false" :arrow="false">
      <view class="tui-line-cell">
        <view class="tui-title">
          <text v-show="rules_&&rules_[0]&&rules_[0].required" class="isrequire">*</text>
          <text>{{label}}</text>
          <view @click="onUpload" class="tui-right" v-show="!readonly_">
              <uni-icons class type="plus" color="#8f8f94" size="15" />
            </view>
        </view>
        <view v-show="fileList.length" class="file-ul">
        <view class="flex file-li" :class="{'last':fileList.length-1 ==index}" v-for="(item,index) in fileList" :key="index">
          <view class="item" @click="onOpenDoc(index)">{{item.fileName}}</view>
          <view class="btnBox">
            <view class="btn" @click="delFile(index)">
              <uni-icons type="trash" color="#8f8f94" size="23" />
            </view>
          </view>
        </view>
        </view>
      </view>
    </tui-list-cell>
    <l-file ref="lFile" @up-success="onSuccess"></l-file>
  </view>
</template>

<script>
import {uploadFileUrl} from "@/pages/customForm/interface"
import lFile from "@/components/other-com/l-file/l-file.vue";
export default {
  components: {
    lFile
  },
  props: {
    label: {
      type: String
    },
    emData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    readonly: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: () => {
        return {};
      }
    },
    rules: {
      type: Array,
      default: () => {
        return [];
      }
    },
    model: {
      type: String
    },
    keyStr: {
      type: String
    }
  },
  data() {
    return {
      readonly_: false,
      rules_: [],
      emData_: {},
      personData: [],
      value: [],
      fileList: []
    };
  },
  watch:{
    'emData.options.defaultValue':function(val){
      // console.log('watch data:',111);
      this.fileList =val||[];
    },
    emData(val){
      this.initemData();
    }
  },
  created() {
    this.initEmData();
  },
  methods: {
    showBlock() {
      //打开文件管理器
      console.log("=================");
    },
    initEmData() {
      if (this.emData && this.emData.key) {
        this.emData_ = this.emData;
        this.emData_["options"]["options"] = this.personData;
        this.readonly_ = this.emData.options.readonly;
        this.rules_ = this.emData.rules;
      } else {
        this.emData_["options"] = this.options;
        this.emData_["rules"] = this.rules;
        this.emData_["model"] = this.model;
        this.emData_["key"] = this.keyStr;
        this.rules_ = this.rules;
      }
    },
    onSuccess(res) {
      console.log("上传成功回调", JSON.stringify(res));
      this.fileList.push(res);
      this.$emit("onChangeVal", this.fileList);
    },
    /* 预览 */
    onOpenDoc(index) {
      let url = this.fileList[index].data.result&&this.fileList[index].data.result.path;
      this.$refs.lFile.download(url).then(path => {
        this.$refs.lFile.open(path);
      });
    },
    /* 保存 */
    onDown() {
      let url =
        "http://hlapi.jwell56.com/dropbox/document/public/download?id=939554512551542784&fileOwner=1330EA09722A42B43EE6C1B621369CE0";
      this.$refs.lFile.download(url, "local").then(path => {
        this.localPath = path;
      });
    },
    /* 上传 */
    onUpload() {
      this.$refs.lFile.upload({
        // #ifdef APP-PLUS
        currentWebview: this.$mp.page.$getAppWebview(),
        // #endif
        //非真实地址，记得更换
        url: uploadFileUrl,
        //默认file,上传文件的key
        name: "file",
        // header: {'Content-Type':'类型','Authorization':'token'},
        header: {
          "X-Access-Token":
            "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE5MDA4MDU0MzQsInVzZXJuYW1lIjoiYWRtaW4ifQ.EnX1t8XZ9BlmsmEGMVrAagWPiZjz-eP9l4_XLnJHOZ0"
        }
        //...其他参数
      });
    },
    //移除文件
    delFile(index) {
      console.log(index);
      this.fileList.splice(index, 1);
      this.$emit("onChangeVal", this.fileList);
    },
    //预览文件
    openFile(index) {
      console.log(index);
    }
  },
  modal: {
    prop: "fileList",
    event: "onChangeVal"
  }
};
</script>

<style lang="scss">
.tui-right {
  margin-left: auto;
  font-size: 26upx;
  line-height: 1;
  color: #999;
  position: relative;
  top:-1px;
  left: -4px;
  transform: scale(1.5);
}
.tui-line-cell {
  width: 100%;
  align-items: center;
  line-height: 32rpx;
}

.tui-title {
  line-height: 32rpx;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  
}
.flex {
  display: flex;

  .item {
    line-height: 32rpx;
    flex: 1;
    align-items: center;
  }
}
.file-ul{
 margin-top: 24upx;
.file-li {
  position: relative;
  padding: 20upx 0;
  color: #333;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    border-bottom: 1px solid #c8c7cc;
    transform: scaleY(0.2);
  }
  &.last::after{
    border: none;
  }
}
}

.btnBox {
  width: 50upx;
  position: relative;
  line-height: 32rpx;
  .btn {
    line-height: 32rpx;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -8px;
  }
}
 .isrequire{ color:#d41200;}
</style>